<template>
	<e-popup :show="show" @cancel="$emit('close')" bgColor="transparent">
		<view class="app-public-msg-detail-tool-goods-popup">
			<view class="e-p-t-28   e-rela">
				<view class="text-center">
					<text class="e-font-32 fw-600 text-center">{{toI18('public.selectGoods')}}</text>
				</view>
				<image src="/pages/public/static/msg/close.png"
					class="app-public-msg-detail-tool-goods-popup__close img-30 e-abso" @tap="$emit('close')"></image>
			</view>
			<e-tabs :list="tabList" :lineColor="primary" :activeStyle="activeStyle" :scrollable="false"
				@change="tabsChange"></e-tabs>
			<swiper class="app-public-msg-detail-tool-goods-popup__swiper" :style="swiperStyle" :current="tabIndex"
				@change="e => (tabIndex = e.detail.current)">
				<swiper-item v-for="(item, index) in goodsList" :key="index">
					<scroll-view class="app-public-msg-detail-tool-goods-popup__swiper__scroll" :style="swiperStyle"
						scroll-y @scrolltolower="getData(index)" lower-threshold="60">

						<view
							class="app-public-msg-detail-tool-goods-popup__swiper__goods e-m-b-20 bg-white e-radius-20 overflow-hidd e-p-24"
							v-for="goods in item.list" :key="goods.id">
							<view class="e-p-r-18">
								<load-image :size="['144rpx']" radius="10rpx" :src="goods.coverImg"></load-image>
							</view>
							<view class="app-public-msg-detail-tool-goods-popup__swiper__goods-right  ">
								<view class="e-line-1">
									<text>{{goods.name}}</text>
								</view>
								<view class="app-public-msg-detail-tool-goods-popup__swiper__goods-right__txt">
									<view>
										<text class="c-red">{{unitEn}}{{goods.price}}</text>
									</view>
									<e-button size="mini" type="primary" plain  shape="circle"
										:text="toI18('public.send')" @click="$emit('send',goods)"></e-button>
								</view>
							</view>

						</view>
						<empty :text="toI18('user.暂无记录')" icon="/pages/public/static/msg/goods_default.png"
							v-if="item.isEmpty"></empty>
						<load-more v-else :showLoad="item.showLoad"></load-more>
					</scroll-view>
				</swiper-item>
			</swiper>



		</view>
	</e-popup>
</template>

<script lang="ts" setup>
	import { ref, reactive, computed } from 'vue'
	import { getIMFootmarkGoodsList, getIMCollectGoodsList, getIMCartGoodsList, getIMBuyGoodsList, type GoodsItem } from '@/common/request/api'
	import { useQueryPage } from '@/common/hooks'
	import { sys } from '@/common/utils'
	// #ifndef APP-NVUE
	import {
		useI18n
	} from '@/common/hooks'
	// #endif

	const props = defineProps({
		show: Boolean,
		unitEn: String,
		primary: String,
		storeId: String,
	})

	// #ifdef APP-NVUE
	const toI18 = getApp().globalData.$t
	// #endif
	// #ifndef APP-NVUE
	const toI18 = useI18n('')
	// #endif


	const tabIndex = ref(0)

	const tabList = computed(() => {
		return [
			{
				name: toI18('public.myFootmark')
			},
			{
				name: toI18('public.myCollect')
			},
			{
				name: toI18('tabbar.购物车')
			},
			{
				name: toI18('public.purchased')
			}
		]
	})

	const activeStyle = computed(() => {
		return { color: props.primary }
	})

	const tabsChange = (e : { index : number }) => {
		tabIndex.value = e.index
	}

	const swiperStyle = {
		height: `${sys().windowHeight - 185}px`
		
	}

	const goodsList = reactive([
		useQueryPage<GoodsItem>({
			api: getIMFootmarkGoodsList,
			option: {
				params: {
					storeId: props.storeId
				},
				responseKey: 'data.rows',
				totalKey: 'data.total',
			}
		}),
		useQueryPage<GoodsItem>({
			api: getIMCollectGoodsList,
			option: {
				params: {
					storeId: props.storeId
				},
				responseKey: 'data.rows',
				totalKey: 'data.total',
			}
		}),
		useQueryPage<GoodsItem>({
			api: getIMCartGoodsList,
			option: {
				params: {
					storeId: props.storeId
				},
				responseKey: 'data.rows',
				totalKey: 'data.total',
			}
		}),
		useQueryPage<GoodsItem>({
			api: getIMBuyGoodsList,
			option: {
				params: {
					storeId: props.storeId
				},
				responseKey: 'data.rows',
				totalKey: 'data.total',
			}
		})
	])

	const getData = (index : 0 | 1 | 2 | 3) => {
		goodsList[index].handleQueryPage()
	}


	const refresh = () => {
		goodsList[0].handleRefresh()
		goodsList[1].handleRefresh()
		goodsList[2].handleRefresh()
		goodsList[3].handleRefresh()
	}

	refresh()
</script>

<style lang="scss" scoped>
	@include appBem_b(public-msg-detail-tool-goods-popup) {
		:deep(.e-tabs__wrapper__nav__item) {
			/*  #ifndef  APP-NVUE  */
			flex: none !important;
			/*  #endif  */
			width: 172rpx;
			padding: 0;
			height: 84rpx !important;
		}

		width: 750rpx;
		background: #F7F7F7;
		border-radius: 20rpx 20rpx 0 0;

		@include appBem_e(close) {
			top: 36rpx;
			right: 20rpx;
		}

		@include appBem_e(swiper) {
			width: 100%;

			&__scroll {
				padding: 32rpx 20rpx;
			}

			&__goods {
				@include flex;
				align-items: center;

				&-right {
					height: 144rpx;
					flex: 1;
					align-items: stretch;

					&__txt {
						@include flex;
						flex: 1;
						align-items: flex-end;
						justify-content: space-between;
					}
				}
			}
		}


	}
</style>